<template>
    <el-card :body-style="{ height: '80vh' }">
        <!-- 搜索条件 -->
        <div class="main-top">
            <div class="main-middle">
                <!-- 第一行 -->
                <span>群组名称：</span>
                <el-input v-model="inputGroupName.name" />
                <br />
                <br />
                <!-- 第二行 -->
                <el-input size="small" style="visibility:hidden" />
                <div class="right">
                    <el-button class="search" type="primary" icon="Search" size="small" @click="subSearch">搜索</el-button>
                    <el-button class="reset" type="primary" icon="RefreshRight" size="small"
                        @click="subReset">重置</el-button>
                </div>
            </div>
            <br />
            <hr style="background-color: #5aa2cc; height: 0.5px; border: none" />

            <!-- 新增群组 -->
            <div>
                <el-button type="primary" @click="handleAdd" class="add" size="small">新增群组</el-button>
                <Dialog ref="sonRef" :groupData="groupData" :valueInfo="valueInfo" :dialogOpen="dialogOpen"
                    :modalTypes="modalTypes" :groupTitle="groupTitle" @submitSure="submitSure"
                    @changeAcademic="changeAcademic" @submitClose="submitClose" @resetForm="resetForm"></Dialog>
            </div>
            <hr style="background-color: #e8e8e8; height: 2px; border: none" />
        </div>
        <!-- 表格 -->
        <div class="common-table">
            <el-table :data="tableDataG" stripe style="width: 100%">
                <el-table-column v-for="(item, index) in tableTitle" :prop="item.props" :label="item.label" :key="index" />
                <el-table-column fixed="right" label="操作">
                    <template #default="{ row }">
                        <el-button link type="primary" size="small" @click="submitEdit(row)">详情</el-button>
                        <el-button link type="primary" size="small" @click="submitDel(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pager">
                <el-pagination :page-size="pageData.pageSize" :pager-count="5" layout="prev, pager, next"
                    :page-count="total" @update:current-page="handlePages" />
            </div>
        </div>
    </el-card>
</template>
  
<script setup>
import { delGroup, getGroup, getListGroup } from "../../api/index"
import { addGroup, editGroup } from "../../api/index"
// import { ElMessage, ElMessageBox } from "element-plus";
import Dialog from "./Dialog.vue"
import { useList } from '../../store/index'
import { regroupData } from '../../utils/system/regroupData'
import { reactive } from "vue";


//引入pinia tableDataL任务列表数据
const store = useList()

const inputGroupName = reactive({
    name: '',
})
const sonRef = ref()

let total = ref()
//分页
const pageData = reactive({
    currentPage: 1,
    pageSize: 9
})

const dialogOpen = ref(false)
const modalTypes = ref() // true表示编辑的浮窗 false表示新增
const groupTitle = ref(null)
const groupData = ref({
    form: {
        id: '',  //群组ID
        name: '',
        count: '',  //组员人数
        createTime: '',
        updateTime: '',
        groupPerson: [], //群组人员
    },
    cascadeData: [],
    options: [], //群组数据
    tolerant: [],//数据暂存
})

//重置
function groupRuleFormRest() {
    groupData.value.form.id = undefined;
    groupData.value.form.name = undefined;
    groupData.value.form.count = undefined;
    groupData.value.form.createTime = undefined;
    groupData.value.form.updateTime = undefined;
    groupData.value.form.groupPerson = [];

    groupData.value.cascadeData = [];
    // groupData.value.options = [];
    groupData.value.tolerant = [];
    nodeData.value = undefined;
}

//新增
const handleAdd = () => {
    console.log(groupData.value.cascadeData, '111');
    groupTitle.value = "新增群组"
    modalTypes.value = false
    dialogOpen.value = true
}

const submitClose = () => {
    groupRuleFormRest()
    // groupData.value.options = [];
    dialogOpen.value = false
    modalTypes.value = false
}


//重置表单
const resetForm = (formEl) => {
    groupRuleFormRest()
    // groupData.value.options = [];
    modalTypes.value = false
    dialogOpen.value = false
}

const tableTitle = [
    {
        props: "name",
        label: "群组名称",
    },
    {
        props: "count",
        label: "群组人数",
    },
    {
        props: "createTime",
        label: "创建日期",
    },
    {
        props: "updateTime",
        label: "更新日期",
    },
];
const tableDataG = ref()

//搜索
const subSearch = () => {
    //根据群组名称搜索群组
    getGroupName(inputGroupName)
}

//获取群组列表的数据进行刷新列表
const getGroupName = () => {
    getGroup({ params: Object.assign(inputGroupName, pageData) }).then((res) => {
        if (res.data.code == 200) {
            tableDataG.value = res.data.data.records
            total.value = res.data.data.pages

        }
    })
    getListGroup().then((res) => {
        groupData.value.options = regroupData(res)
    })

}

//搜索重置
const subReset = () => {
    inputGroupName.name = null
    getGroupName()
}


//群组节点
let nodeData = ref([])
//节点改变后拿到节点数据
const changeAcademic = (cascaderRef) => {
    nodeData.value = cascaderRef.getCheckedNodes()
    nodeData.value = nodeData.value.filter(item => {
        return item.level != 1
    })
}

//编辑
const submitEdit = (row) => {
    groupTitle.value = "编辑任务"
    modalTypes.value = true
    dialogOpen.value = true

    groupData.value.form = JSON.parse(JSON.stringify(row))
    // console.log(groupData.value.cascadeData, 'form2232')
    groupData.value.form.groupPerson.forEach(item => {
        // console.log(item.empId, 'form222')
        
        groupData.value.cascadeData.push(item.empId)
    })

}

//删除
const submitDel = (row) => {
    ElMessageBox.confirm("你确定删除吗?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        delGroup(row.id).then((res) => {
            ElMessage.closeAll();
            if (res.data.code != 200) {
                ElMessage({
                    message: '删除失败',
                    type: 'error',
                })
            } else {
                getGroupName()
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
            }
        })
    })
        .catch(() => {
        });
}


// 确定
const submitSure = (groupRef) => {
    if (!groupRef) return
    groupRef.validate((valid) => {
        console.log(valid, 'valid');
        if (valid) {
            //后续对表单数据的处理
            if (modalTypes.value == false) {
                nodeData.value.forEach(e => {
                groupData.value.form.groupPerson.push({
                    empId: `${e.data.value}`,
                    empName: `${e.data.label}`,
                })
            })
                //新增数据时
                addGroup(groupData.value.form).then((res) => {
                    //清空表单的内容
                    groupRuleFormRest()

                    //关闭弹窗
                    dialogOpen.value = false;
                    ElMessage.closeAll();
                    if (res.data.code != 200) {
                        ElMessage({
                            message: '添加成功',
                            type: 'error',
                        })
                        getGroupName()
                    } else {
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                        getGroupName()
                    }
                })
            } else {
                editGroup(groupData.value.form).then((res) => {
                    groupRuleFormRest()
                    // valueInfo.value = []
                    //关闭弹窗
                    dialogOpen.value = false;
                    ElMessage.closeAll();
                    if (res.data.code != 200) {
                        ElMessage({
                            message: '修改失败',
                            type: 'error',
                        })
                        getGroupName()
                    } else {
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        getGroupName()
                    }
                })
            }
        }
    })
}

//分页
const handlePages = (val) => {
    pageData.currentPage = val
    getGroupName()
}





onMounted(() => {
    getGroupName()
})


</script>
  
<style scoped lang="less">
.el-card {
    margin-top: 10px;
}

:deep(.el-card__body) {
    padding: 10px;
}

.el-input {
    width: 150px;
}

span {
    font-size: 16px;
    margin-left: 20px;
}

.right {
    float: right;
    padding-right: 20px;
}

.right .search,
.add {
    color: #ffffff;
    background-color: #fd8c71;
    border: none;
}

.right .reset {
    background-color: #fda671;
    border: none;
}

.el-button:hover {
    opacity: 0.7;
}

.add {
    margin: 5px;
}

.el-table {
    font-size: 12px;
    --el-table-header-bg-color: #dadada9d;
}

:deep(.el-table .cell) {
    text-align: center;
}

// .main-top {
//   height: 19vh;
// }

.common-table {

    position: relative;
    margin-top: 20px;

    .pager {
        display: flex;
        flex-direction: row-reverse;
        // position: absolute;
        // right: -5px;
        // top: 50vh;
    }
}

.main-middle {
    margin-bottom: -10px;
}
</style>